<template>
  <el-card class="basic-card" :body-style="{
    height: '100%',
    display: 'flex',
    flexDirection: 'column'
  }">
    <div class="header">
      <div class="icon-card-container">
        <i :class="iconClass"></i>
      </div>
      <div class="title">{{ title }}</div>
    </div>
    <div class="main">
      <slot></slot>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    iconClass: {
      type: String,
      default: ""
    }
  }
}
</script>

<style lang="scss" scoped>
  .basic-card {
    height: calc(100% - 30px);
    margin-top: 30px;
    overflow: unset;
    min-height: calc(100vh - 185px);
  }
  .header {
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
  }
  .header .icon-card-container {
    color: #ffffff;
    font-size: 32px;
    //padding: 20px 16px 20px 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(to right top, #ffffff, #5976adbd, #4c5a9c);
    border-radius: 4px;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)!important;
    position: absolute;
    top: -50px;

    i {
      position: relative;
      top:15px;
      left:inherit;
      font-size: 32px;
      margin: 0 auto;
    }
    i::before{
      position: relative;
      left: 15px;
      font-size: 32px;
    }

    .iconfont {
      width: 32px;
      height: 32px;
      justify-content: center;
      //display: flex;
      align-items: center;
      position: relative;
    }

    .iconfont::before {
      position: absolute;
    }
  }

  .header .title {
    font-size: 20px;
    margin-left: 100px;
  }

  .main {
    flex-grow: 1;
    overflow: auto;
  }
</style>
